<template>
  <van-nav-bar title="退货退款申请" left-text="返回" left-arrow @click-left="back" />

  <!-- 订单状态 -->
  <van-row justify="space-between" class="orderstaus">
    <van-col span="8" class="status">
      <h3>已收货</h3>
    </van-col>
    <van-col span="10">
      <van-icon name="/assets/images/icon-zfb.png" size="130" />
    </van-col>
  </van-row>

  <!-- 收货地址 -->
  <!-- <div class="jd-qrdd-a1">
    <span class="qrdd-a1-t1">{{ info.address.consignee }}</span>
    <span class="qrdd-a1-t1">{{ info.address.mobile }}</span>
    <span class="qrdd-a1-t2" v-show="info.address.status == 1">默认地址</span>

    <div class="qrdd-a1-b1">
      <span class="qrdd-a1-img1"></span>
      <span class="qrdd-a1-t3">{{ info.address.region_text }} {{ info.address.address }}</span>
    </div>
    <span class="qrdd-a1-img2"></span>
  </div> -->

  <!-- 退款详请 -->
  <!-- <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="status" is-link readonly name="status" label="退款原因" placeholder="请选择退款原因"
        @click="showPicker = true" :rules="[{ required: true, message: '请选择退款原因' }]" />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
      <van-field v-model="refundreason" rows="2" autosize name="refundreason" label="退款原因" type="textarea" maxlength="50"
        placeholder="请输入退款原因" show-word-limit />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        确认提交
      </van-button>
    </div>
  </van-form> -->
</template>
<script setup>
//相当于vue2 选项式API当中的 this对象
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

//获取到用户的信息
var business = reactive(proxy.$cookies.get('business'))

//返回上一级
const back = () => {
  proxy.$router.go(-1)
  return false
}

// 订单id
const orderid = ref(0);

//钩子函数
onBeforeMount(() => {
  orderid.value = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
  getorderInfoData();
})



/**
 * 退货退款
 * 分成三大块 订单状态、收货地址、退款详情
 * 订单状态  order.status_text  icon
 * 收货地址  business_address 用户的收货地址信息展示
 * 退款详情  表单结构（选择退款方式、填写退款原因、提交表单）
 */
// 总数据
const info = ref({
  address: {},
});
// 下拉选择数据
const columns = [
  { text: "仅退款", value: "-1" },
  { text: "退款退货", value: "-2" },
];

// 获取界面总数据
const getorderInfoData = async () => {
  // 组装数据
  var data = {
    busid: business.id,
    orderid: orderid.value,
  }

  // 发起请求
  var result = await proxy.$POST({
    url: '/order/refund',
    params: data
  })

  console.log(result.data)
};

</script>
<style>
.orderstaus {
  background-color: rgb(253, 108, 108);
}

.status {
  color: rgb(255, 255, 255);
  font-size: 15px;
}

.status h3 {
  margin: 30px 14px;
}
</style>
